<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="nutshelljs,nutshell,blockslide" />
    <title>nutshelljs v0.1.2 - blockslide</title>
    <script type="text/javascript" src="prototype/prototype.js"></script>
    <script type="text/javascript" src="scriptalicious/scriptaculous.js"></script>
    <script type="text/javascript" src="scriptalicious/effects.js"></script>
    <script type="text/javascript" src="nutshelljs/nutshell.js"></script>
    <script type="text/javascript" src="nutshelljs/template.js"></script>
    <script type="text/javascript" src="nutshelljs/blockslide.js"></script>
    <script type="text/javascript" src="nutshelljs/viewport.js"></script>


    <style type="text/css">
      .clear {clear: both;}
      
      h1, h2, h3, h4, h5, h6 {padding: 0; margin: 0; font-size: 12px;}
      h1 {font-size: 18px;}
      h2 {font-size: 16px;}
      h3 {font-size: 14px;}
    



      #headerSlideshow {width: 150px; height: 190px; overflow: hidden;}
      #headerSlideholder {width: 920px; height: 190px}
      #headerSlideholder .slidePanel {float: left; width: 150px; height: 190px; padding: 0;}

      #mainHolder {width: 922px; margin: 0 auto;}

      #mainTabHolder {position: relative; min-height: 800px; overflow: hidden;}
      #mainTab {width: 6000px; min-height: 800px;}
      #mainTab .tabSlider {float: left; width: 900px; min-height: 800px; padding: 0;}
      .tabToHolder {margin-left: 10px; margin-top: -1px; height: 28px; position: relative;}
      * html .tabToHolder {margin-bottom: -1px}
      *:first-child+html .tabToHolder {margin-bottom: -1px}
      .tabToHolder .tabToAbso {position: absolute; top: 1px; z-index: 1000;}
      .tabToHolder .tabTo {background: #ddd; float: left; padding: 3px 6px; border: 1px solid black; margin: 0 3px 0 0;}
      .tabToHolder .tabTo {-moz-border-radius: 3px 3px 0 0}
      .tabToHolder .tabToHover {background: #fff; font-weight: bold; border-bottom: 1px solid white;}
      .tabToHolder .mainTabHover {background: #fff; font-weight: bold; border-bottom: 1px solid white;}
      .tabPadder {padding: 10px !important;}


      #mainTab .tab_1 {background: #C7E8F7 !important}
      #mainTabs .tab_1 {background: #92CFEE !important}
      #mainTabs .tab_1.mainTabHover {background: #C7E8F7 !important; border-bottom: 1px solid #C7E8F7;}

      #mainTab .tab_2 {background: #F1EBD5 !important}
      #mainTabs .tab_2 {background: #DED7C4 !important}
      #mainTabs .tab_2.mainTabHover {background: #F1EBD5 !important; border-bottom: 1px solid #F1EBD5;}
      
      #mainTab .tab_3 {background: #FDE3EE !important}
      #mainTabs .tab_3 {background: #F5A1BB !important}
      #mainTabs .tab_3.mainTabHover {background: #FDE3EE !important; border-bottom: 1px solid #FDE3EE;}

      #mainTab .tab_4 {background: #FFFAC0 !important}
      #mainTabs .tab_4 {background: #FFF49B !important}
      #mainTabs .tab_4.mainTabHover {background: #FFFAC0 !important; border-bottom: 1px solid #FFFAC0;}

      #mainTab .tab_5 {background: #FFEBC2 !important}
      #mainTabs .tab_5 {background: #FDCEB0 !important}
      #mainTabs .tab_5.mainTabHover {background: #FFEBC2 !important; border-bottom: 1px solid #FFEBC2;}
      
      #mainTab .tab_6 {background: #E1EEC2 !important}
      #mainTabs .tab_6 {background: #C4DE94 !important}
      #mainTabs .tab_6.mainTabHover {background: #E1EEC2 !important; border-bottom: 1px solid #E1EEC2;}
      
      #mainTab .tab_7 {background: #fff !important}
      #mainTabs .tab_7 {background: #eee !important}
      #mainTabs .tab_7.mainTabHover {background: #fff !important; border-bottom: 1px solid #fff;}

      .smaller {font-size: 11px;}
      .new {font-style: italic; color: red;}
      .exp {color: #d60;}
      .footer {text-align: center; padding: 30px 10px 10px ;}
    
      .ns-window-normal-frame,
        .ns-window-normal-titlebar,
          .ns-window-normal-title,
            .ns-window-normal-dataHolder {padding: 0; margin: 0; font-size: 12px;}
      .ns-window-floating-frame,
        .ns-window-floating-titlebar,
          .ns-window-floating-title,
            .ns-window-floating-dataHolder {padding: 0; margin: 0; font-size: 12px;}
        
      
      .ns-window-floating-cover {position: absolute; top: 0; left: 0; width: 100%; background: ;}
      .ns-window-floating-cover {background: url(images/winCoverBG.png)}
      .ns-window-floating-frame {position: absolute; top: 40px; left: 300px;}
      .ns-window-floating-frame {width: 300px; }      
      .ns-window-floating-frame {border: 1px solid black; background: #eee;}      
      .ns-window-floating-holder {}
      .ns-window-floating-titlebar {}      
      .ns-window-floating-titlebar .ns-window-floating-title {font-size: 15px; padding: 4px 5px 1px;}
      .ns-window-floating-dataHolder {padding: 5px; margin: 2px; background: white; border: 1px solid #666}  
      .ns-window-floating-dataHolder {min-height: 60px; text-align: center; padding-top: 20px;}
      
    </style>
    
    <link rel="stylesheet" href="examples/image_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/html_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/switch_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/vertical_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/stack_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/tabs_demo/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="examples/viewport_demo/style.css" type="text/css" media="screen" />
    
  </head>
  <body>

    <script type="text/javascript">
      var sc  = new nutShell.viewport({title: 'Welcome to NutShellJS!', html: 'This is a test of the newest component: "viewport"<br/><br/>It is setup as a pop-in window.', popped: true});
    </script>

    <!-- MAIN TAB EXAMPLE -->
    
    <div id="mainHolder">
      <h1>blockslide examples</h1>
      <p>Here are some practical examples to get you started with blockslide.<br />
      You can track framework progress on our Google Code Project Page: <a href="http://code.google.com/p/nutshelljs/">nutshelljs v0.1.2</a></p>
      <div id="mainTabs" class="tabToHolder">
        <div class="tabToAbso">
          <div class="tabTo mainTabClass tab_1"><div class="jumpToWrapper">Image Demo</div></div>
          <div class="tabTo mainTabClass tab_2"><div class="jumpToWrapper">HTML Demo</div></div>
          <div class="tabTo mainTabClass tab_3"><div class="jumpToWrapper">Hard Switch</div></div>
          <div class="tabTo mainTabClass tab_4"><div class="jumpToWrapper">Vertical</div></div>
          <div class="tabTo mainTabClass tab_5"><div class="jumpToWrapper">Stack Transition</div></div>
          <div class="tabTo mainTabClass tab_6"><div class="jumpToWrapper">Tabs <span class="smaller new">New!</span></div></div>
          <!--<div class="tabTo mainTabClass tab_7"><div class="jumpToWrapper">View Port <span class="smaller exp">Alpha</span></div></div>-->
          <br class="clear" />
        </div>
      </div>
      <div id="mainTabHolder" style="background: #666; border: 1px solid black;">
        <div id="mainTab" style="position: absolute; top: 0; left: 0">
          <div class="tabSlider tabPadder tab_1" id="demo1"></div>
          <div class="tabSlider tabPadder tab_2" id="demo2"></div>
          <div class="tabSlider tabPadder tab_3" id="demo3"></div>
          <div class="tabSlider tabPadder tab_4" id="demo4"></div>
          <div class="tabSlider tabPadder tab_5" id="demo5"></div>
          <div class="tabSlider tabPadder tab_6" id="demo6"></div>
          <!--<div class="tabSlider tabPadder tab_6" id="demo7"></div>-->
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var sc  = new nutShell.blockslide({slideWidth: 920, slideHeight: 800, currentSlide: 5, mode: 'stack', slidePanelClass : 'tabSlider',
                                         containerEL: 'mainTabHolder', sliderEL: 'mainTab', thumbEL: 'mainTabs',
                                         jumpToClass : 'mainTabClass', jumpToHoverClass : 'mainTabHover'});
      new Ajax.Updater('demo1', 'examples/image_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo2', 'examples/html_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo3', 'examples/switch_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo4', 'examples/vertical_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo5', 'examples/stack_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo6', 'examples/tabs_demo/demo.htm', {evalScripts: true, method: 'get'});
      new Ajax.Updater('demo7', 'examples/viewport_demo/demo.htm', {evalScripts: true, method: 'get'});
    </script>
    
    <!-- MAIN TAB EXAMPLE -->
    
    <div class="footer">&copy; 2009 da404lewzer. All Rights Reserved.</div>
  </body>
</html>